<html>
<head>
</head>
<body>
  <h1>Vue响应式原理-Vue2 Object.defineProperty()</h1>
  <div id="app"></div>
</body>
<script>
  let data = {
    msg: 'hello~'
  }
  let vm = {} // 模拟Vue实例
  // 数据劫持：当访问或设置vm中成员时，做一些干预操作
  Object.defineProperty(vm, 'msg', {
    // 可枚举（可遍历）
    enumerable: true,
    // 可配置（可用delete删除，可通过defineProperty重新定义）
    configurable: true,
    // 获取数据时执行 访问器
    get() {
      console.log('get: ', data.msg)
      return data.msg
    },
    // 当设置值时执行 设置器
    set(newValue) {
      console.log('set: ', newValue)
      if (newValue === data.msg) {
        return
      }
      data.msg = newValue
      document.querySelector('#app').textContent = data.msg
    }
  })

  // 测试
  vm.msg = 'Hello~ World~'
  setTimeout(() => {
    console.log(vm.msg)
  }, 12000)
</script>

</html>